<template>
  <codemirror
    v-model="bindValue"
    placeholder="Code goes here..."
    :style="{ height: '100%' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="4"
    :extensions="[json()]"
    @ready="
      (e) => {
        mirrorRef = e.view
      }
    "
  />
</template>

<script lang="ts" setup>
import { Codemirror } from 'vue-codemirror'
import { json } from '@codemirror/lang-json'
const props = defineProps<{ modelValue: string }>()
const emits = defineEmits(['update:modelValue'])
const bindValue = useVModel(props, 'modelValue', emits)
const mirrorRef = ref()

defineExpose({
  mirrorRef,
})
</script>
